@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    @apply size-full;
  }
  html {
    @apply size-full;
    touch-action: none;
  }
  #root {
    @apply size-full;
  }
  .pixelated-canvas {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: pixelated; /* Chrome, Opera */
    image-rendering: crisp-edges; /* Safari */
  }

  .alpha-background {
    --alpha-background-size: 10px;
    background: repeating-conic-gradient(#bfbfbf 0% 25%, #fff 0% 50%) 50% /
      var(--alpha-background-size) var(--alpha-background-size);
  }

  .dark {
    color-scheme: dark;
  }

  input[type="color"] {
    border: none;
  }
  input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type="color"]::-webkit-color-swatch {
    border: 1px solid hsl(var(--input));
    @apply rounded-md;
  }

  .remove-table-child > div {
    display: block !important;
  }

  .wheel-hsl {
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgb(255, 0, 0),
        rgb(255, 255, 0),
        rgb(0, 255, 0),
        rgb(0, 255, 255),
        rgb(0, 0, 255),
        rgb(255, 0, 255),
        rgb(255, 0, 0)
      ),
      radial-gradient(circle closest-side, white, transparent);
    background-blend-mode: overlay;
  }

  .alpha-track {
    --alpha-track-color: 10px;
    background: linear-gradient(
        to bottom,
        var(--alpha-track-color),
        transparent
      ),
      repeating-conic-gradient(#bfbfbf 0% 25%, #fff 0% 50%) 50% / 10px 10px;
    background-blend-mode: normal;
  }

  .hsvalue-track {
    --hsvalue-track-color: 10px;
    background: linear-gradient(to bottom, var(--hsvalue-track-color), black);
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes glow-animation {
    0% {
      stroke: red;
      stroke-width: 2;
      filter: drop-shadow(0 0 5px red);
    }
    50% {
      stroke: hsl(var(--foreground));
      stroke-width: 4;
      filter: drop-shadow(0 0 20px hsl(var(--foreground)));
    }
    100% {
      stroke: red;
      stroke-width: 2;
      filter: drop-shadow(0 0 5px red);
    }
  }

  .glowing-eye {
    animation: glow-animation 1.5s infinite alternate;
  }

  .animate-fade-in {
    animation: fade-in 0.2s ease-in-out;
  }

  .image-outline {
    --image-outline-color: white;
    filter: drop-shadow(1px 0 0 var(--image-outline-color))
      drop-shadow(0 1px 0 var(--image-outline-color))
      drop-shadow(-1px 0 0 var(--image-outline-color))
      drop-shadow(0 -1px 0 var(--image-outline-color));
  }

  .pile {
    display: grid;
    > * {
      grid-area: 1/1;
    }
  }
}

